<template>
	<view class="person_rank">

		<sl-calendar :rightnow="true" @change="chooseDay" :selected="selected"></sl-calendar>
		<u-button type="error" size="mini" style="margin-left: 5px;">待审核</u-button>
		<u-button type="warning" size="mini" style="margin-left: 5px;">已预约</u-button>
		<u-button type="info" size="mini" style="margin-left: 5px;">已到店</u-button>
		<u-button type="primary" size="mini" style="margin-left: 5px;">已开单</u-button>
		<!-- <u-button  size="mini" class="custom-style" >服务中</u-button> -->
		<u-button type="success" size="mini" style="margin-left: 5px;">已完成</u-button>
		<u-button  size="mini" style="margin-left: 5px;">已失效</u-button>
		<view class="achievement_footer">
			<view class="footer_table">
				<view class="table_time">
					<view class="item_title">时间</view>
					<view class="time_item" v-for="(item,index) in items" :key="index">
						<view>{{item.trueName}}</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scroll">
					<view class="con_title">
						<view class="title_head" v-for="(time,index) in times" :key="index">{{time}}</view>
					</view>
					<view class="con_content" v-for="(item,index) in items" :key="index">
						<view class="content_item">
							<view class="con_data" v-for="appo in item.apjsons" > 
								<view  v-if="appo.apid && appo.appoint_status != 10"  @click="moreClick(item.id, appo)" style="height: 100%;background-color: #ffbfb0;">
									<view  style="padding-top: 20px;height: 50%;">{{appo.member_name}}</view>
									<view style="height: 50%;">已预约 </view>
								</view>
								<view  v-else-if="appo.apid && appo.appoint_status == 10"  @click="doDelOccupyAppoint(appo.apid)" style="height: 100%;background-color: #666;" >
									<view  style="padding-top: 20px;height: 50%;color:#fff">已占用 </view>
									<view style="height: 50%;color:#666">123 </view>
								</view>
								<view  v-else  style="height: 100%;"  @click="moreClick(item.id, appo)">
									<view  style="padding-top: 20px;height: 50%;color:#fff">占用 </view>
									<view style="height: 50%;color:#fff">预约 </view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 创建用户图标 -->
		<view class="icon_creat" @click="appoint_list">
			<image :src="BASE_IMG_URL+'morebtn.png'" mode="scaleToFill"></image>
		</view>
		
		<view>
			<u-popup v-model="show" mode="bottom" border-radius="20" height="180px"> 
				<view class="pull_con">	 
					<view class="pull_item" style="" @click="appointHandle()">
						<view style="padding: 15rpx 22rpx;border: 1px solid #ededed;">预约</view>
					</view>
					<view class="pull_item" @click="appointHandle(1)">
						<view style="padding: 15rpx 22rpx;border: 1px solid #ededed;">占用</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	import {
		getNextDay,
		timeFormat,
		getRecentDay
	} from "@/components/sl-calendar/util.js"
	import {
		formateDate,
	} from "@/common/util.js"
	import {
		BASE_IMG_URL
	} from '@/util/api.js' 
	import {
		netSelect, 
		netKehuDetail,
		netAppointDetail,
		netUpdateAppoint,
		netAddAppoint,
		delOccupyAppoint,
		occupyAppoint,
		getServicetimelist,
		getAppointData
		
	} from '@/api/kehu.js'
	import {
		pageJumps,
		statisticalPageJumps,
		customerPageJumps
	} from "../crm_page_jumps.js";
	export default {
		mixins: [pageJumps, customerPageJumps],
		data() {
			return {
				BASE_IMG_URL: BASE_IMG_URL,
				show: false,
				valueMoney: 0,
				optionsMoney: [{
						text: '预约',
						value: 1
					},
					{
						text: '占用',
						value: 2
					},
					{
						text: '取消',
						value: 3
					},
				],
				selected: [], //红点
				list: [],
				dataMonth: '',

				isStaff: true,
				day: formateDate(new Date(), 'Y-M-D'),
				times: [],
				items: [],
				currentAppo: null,
			}
		},
		onShow() {
			let date = new Date()
			this.getData()
		},
		methods: {
			
			moreClick(staff_id, appo) {
				this.currentAppo = appo
				uni.setStorageSync('__staffId', staff_id)
				this.show = true
			},
			
			doOccupyAppoint() {
				let that = this
				console.log('占用....') 
				let params =    { 
				} 
			    {
					let usetime = this.day+' '+this.currentAppo.hmtime
					let user_id = uni.getStorageSync('__staffId')
					if(user_id) {
						params.user_id = user_id
					}
					params.usetime = usetime
					occupyAppoint(params).then(res => {
						uni.showToast({
							title: '占用成功',
							icon: 'none',
							duration: 2000
						}) 
						
						that.show = false
						that.getData()
					})
				}
				
			},
			doDelOccupyAppoint(id) {
				let that = this
				console.log('占用....') 
				let params =    { 
				} 
				if(id) {
					uni.showModal({
						title: '提示',
						cancelText: '取消',
						confirmText: '确认',
						content: '请确认是否取消占用?',
						success: (res) => {
							if (res.confirm) {
								
								delOccupyAppoint({id: id}).then(res => {
									uni.showToast({
										title: '取消占用成功',
										icon: 'none',
										duration: 2000
									})
									that.getData()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}   
			},
			appointHandle(occupy) {
				if(this.currentAppo) {
					if(occupy) {
						this.doOccupyAppoint()
					} else {
						let id = this.currentAppo.apid
						
						if(id) {
							uni.navigateTo({
								url: '/pagesA/crm/appoint/newAppoint?id='+(id||'')
							})
						} else {
							let usetime = this.day+' '+this.currentAppo.hmtime
							uni.navigateTo({
								url: '/pagesA/crm/appoint/newAppoint?usetime=' +  (usetime||'')
							})
						}
						
					}
				}
			},
			//日历选择日期
			chooseDay(e) {
				console.log('日历选择:', e)
				this.day = timeFormat(new Date(e.replace(/-/g, "/")), "yyyy-MM-dd");
				//请求该日已有业务的时间段数据

			},
			// 选择打卡日期
			bindDateChange: function(e) {
				this.day = e.target.value
			},
			
			changeTopMoney(e) {
				this.valueMoney = e.detail.value
				this.getMydetail()
			},
			getData() {
				let that = this
				let params = {
					day: that.day
				}

				getServicetimelist().then(res => {
					that.times = res.data
				})
				getAppointData(params).then(res => {
					that.items = res.data
				})

			},
			handleData(data) {
				// data.reverse()
				let y = []
				let x1 = []
				data.forEach((ele, index) => {
					y.push(ele.staffName)
					x1.push(ele.salesAmount)
				})
				this.chartData.categories = y
				this.chartData.series[0].data = x1
			},
			changeYeay(e) {
				this.dataYear = e.detail.value
				this.getData()
			},
			changeDataType(e) {
				this.typeIndex = e.detail.value
				this.getData()
			},
			changeMonth(e) {
				this.dataMonth = e.detail.value
				this.getData()
			},
			changeArr(e) {
				this.arrIndex = e.detail.value
				this.getData()
			}
		},
		components: {},
		onReady() {

		}
	}
</script>

<style lang="scss" scoped>
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.custom-style {
		color: #dbf1e1; 
	}
	.pull_con {
	
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: center;
		color: #999;
		box-sizing: border-box;
	
		.pull_item {
			width: 100%;
			margin-bottom: 90rpx;
			margin-right: 27rpx;
	
			:first-child {
				padding-bottom: 10rpx;
			}
	
			:last-child {
				padding-bottom: 50rpx;
			}
		}
	}
	
	.charts-box {
		width: 100%;
		height: 400px;
		background: #fff;
	}

	.querylist {
		margin: 40rpx 0 30rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.queryfir {
			margin-right: 15rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
			background: #fff;
			border-radius: 8rpx;
		}

		.querysec {
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
			background: #fff;
			border-radius: 8rpx;
		}

		// 数据看板
		.form_right {
			width: 180rpx;
			height: 70rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
				margin-left: 15rpx;
			}
		}
	}

	.person_rank {

		.achievement_body {
			margin: 30rpx;

			.achievement_title {
				border-radius: 10rpx;
				padding: 20rpx 0 40rpx;
				background-color: #fff;
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.title_item {
					width: 50%;

					:first-child {
						padding: 20rpx;
						color: #ccc;
					}
				}
			}
		}

		.achievement_footer {
			margin: 0 30rpx;
			overflow: hidden;

			.footer_table {
				display: flex;

				.table_time {
					width: 200rpx;
					white-space: nowrap;

					.item_title {
						padding-left: 20rpx;
						font-weight: 700;
						height: 90rpx;
						line-height: 90rpx;
						border: 1rpx solid #f2f2f2;
						border-right: 0;
					}

					.time_item {
						padding-left: 20rpx;
						height: 190rpx;
						// line-height: 190rpx;
						background-color: #fff;
						border-bottom: 1rpx solid #EAEAEA;

					}
				}

				.scroll {
					white-space: nowrap;
					width: 600rpx;
					overflow: hidden;

					.con_title {
						.title_head {
							display: inline-block;
							width: 200rpx;
							height: 90rpx;
							line-height: 90rpx;
							text-align: center;
							border-top: 1rpx solid #f2f2f2;
							border-bottom: 1rpx solid #f2f2f2;
						}

						:last-child {
							border-right: 1rpx solid #f2f2f2;
						}
					}

					.con_content {
						.content_item {
							.con_data {
								display: inline-block;
								width: 200rpx;
								height: 190rpx;
								// line-height: 190rpx;
								text-align: center;
								background-color: #fff;
								border-bottom: 1rpx solid #EAEAEA;
								border-left: 1rpx solid #EAEAEA;
							}
						}
					}
				}
			}
		}

		.pagination_demo {
			background-color: #fff;
			padding: 30rpx 60rpx;
			margin: 0 30rpx;
		}

		.van_po {
			position: absolute;

			.screen_con {
				z-index: 9999;
				background-color: #fff;

				.screen_title {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx 20rpx 24rpx;
					border-bottom: 1rpx solid #EAEAEA;

					:first-child {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.screen_style {
					.style_title {
						padding-left: 24rpx;
						padding-top: 30rpx;
					}

					.style_con {
						display: flex;
						width: 560rpx;
						flex-wrap: wrap;
						text-align: center;
						padding-left: 9rpx;

						.style_item {
							width: 150rpx;
							height: 60rpx;
							line-height: 60rpx;
							border: 1rpx solid #f4f4f4;
							margin: 15rpx 15rpx;
							color: #b6b6b6;
						}

						.type_active,
						.time_active {
							border: 1rpx solid #52c1f5;
							color: #52c1f5;
						}
					}

					.style_input {
						margin: 20rpx;
						border: 1rpx solid #EAEAEA;
						padding-left: 24rpx;

						input {
							height: 80rpx;
						}
					}
				}
			}
		}

		.button_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			left: 0;
			font-size: 32rpx;
			height: 90rpx;
			text-align: center;

			.reset {
				flex: 1;
				line-height: 90rpx;
				color: #1e89fe;
			}

			.sure {
				flex: 1;
				line-height: 90rpx;
				background-color: #03aa96;
				color: #fff;
			}

		}
	}
</style>
